/*从 Google Fonts 导入 “Poppins” 字体家族，包括从 300 到 900 的所有权重。display=swap 参数确保在字体加载期间文本不会丢失，而是会暂时使用备用字体*/
@import url('https://fonts.googleapis.com/\css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /*设置了所有元素的默认字体为 “Poppins”，若不可用，则回退到浏览器默认的无衬线字体。*/
    font-family: 'Poppins', sans-serif;
    
}

.header {
    /*元素固定在视口的顶部，即使页面滚动也不会移动*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 80px;
    background: transparent;
    /* background: rgba(34, 34, 36, 0.466); */
    /*元素设置为 Flexbox 容器*/
    display: flex;
    /*在 Flexbox 容器内分配了主轴上的空白空间，使得子元素之间有相等的间隔，
    并且第一个子元素位于开始位置，最后一个子元素位于结束位置。*/
    justify-content: space-between;
    /*使得 Flexbox 容器内的所有子元素在交叉轴上居中对齐。*/
    align-items: center;
    /*设置了 .header 元素的堆叠顺序，确保它位于页面上的其他元素之上。*/
    z-index: 1000;
}

.logo {
    font-size: 30px;
    color: white;
    text-decoration: none;
    font-weight: 700;
}

.navbar a {
    font-size: 18px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    margin-left: 50px;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
}

.bg-slide,
.bg-slide .circle,
.bg-slide .circle img,
.corcle-darktransp {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bg-slide {
    display: flex;
    /*在主轴上居中对齐 Flexbox 容器内的子元素。主轴默认是水平*/
    justify-content: center;
    /*于在交叉轴上居中对齐 Flexbox 容器内的子元素.交叉轴默认是垂直的*/
    align-items: center;
    user-select:none;
}

.bg-slide .circle {
    /*用于指定在什么情况下（如果有）某个特定的图形元素可以成为鼠标事件的 target。
    当设置为 none 时，元素及其子元素将不会成为鼠标事件的 target。
    这意味着用户不能通过鼠标与之交互，例如点击、拖动或悬停效果都不会触发。*/
    pointer-events: none;
    /*user-select 属性用于控制用户能否选中文本。
    当设置为 none 时，用户将无法选择或高亮显示元素中的文本。
    这通常用于防止用户复制或选中页面上的某些文本*/
    user-select: none;
    /*overflow 属性用于指定如果内容溢出元素框时应该发生什么。
    当设置为 hidden 时，溢出的内容会被裁剪，并且不会显示在元素框之外。
    这意味着任何超出 .circle 元素指定宽度和高度的内容都不会显示*/
    overflow: hidden;
    /*综上
    .circle 元素及其子元素不会响应用户的鼠标事件，例如点击。
    用户无法选择或复制 .circle 元素中的文本。
    如果 .circle 元素中的内容超出了其尺寸，超出部分将不会显示。
    这通常用于确保元素内部的图像或其他内容不会破坏布局*/
}

.bg-slide.active .circle{
    z-index: 10;
}

.bg-slide .circle.large,
.corcle-darktransp {
    /*circle(): 这个函数定义了一个圆形的裁剪路径。
    50%: 第一个参数是圆的半径，这里的 50% 表示圆的半径是元素宽度和高度中较小者的 50%。这意味着圆的大小将占据元素宽度和高度中较小值的 100%。
    at: 关键字 at 用于指定圆心的位置。
    50% 50%: 这两个百分比值定义了圆心的位置，它们相对于元素本身的宽度和高度。在这个例子中，50% 50% 表示圆心位于元素的几何中心。*/
    clip-path: circle(50% at 50% 50%);
}

.bg-slide .circle.small {
    clip-path: circle(30% at 50% 50%);
    z-index: 12;
}

.bg-slide .circle img {
    
    /*保持图片的宽高比。
    这意味着图片会被裁剪以填充容器，但整个图片都会被显示，不会拉伸或压缩*/
    object-fit: cover;
    /*transform 属性用于对元素进行 2D 或 3D 转换,
    如旋转（rotate）、缩放（scale）、倾斜（skew）和平移（translate）等*/
    transform: rotate(230deg) scale(4);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.645,0.045,0.355,1),
    opacity 1s cubic-bezier(0.645,0.045,0.355,1);
}
.bg-slide.active .circle img{
    transform: rotate(360deg) scale(1.2);
    opacity: 1;
}
.bg-slide.after-active .circle img{
    transform: rotate(720deg) scale(4);
    opacity: 0;
}
.bg-slide.active .circle.bg img,
.bg-slide.after-active .circle.bg img{
    transition-delay: .9s;
}
.bg-slide.active .circle.large img,
.bg-slide.after-active .circle.large img{
    transition-delay: .6s;
}
.bg-slide.active .circle.small img,
.bg-slide.after-active .circle.small img{
    transition-delay: .3s;
}
.corcle-darktransp {
    background-color: rgba(84, 84, 84, 0.303);
    z-index: 11;
}

.bg-slide .content-text {
    position: absolute;
    z-index: 100;
    /* background: rgb(67, 248, 248); */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bg-slide.active .content-text{
    z-index: 101;
}
.content-text .place,
.content-text .country{
    /* background: lightseagreen; */
    overflow: hidden;
} 

.content-text .country {

    margin-top: 60px;
}

.content-text .place h1,
.content-text .country h2 {
    color: white;
    text-shadow: 2px 2px 2px #0000005c;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0;
    transition: transform 1s cubic-bezier(0.645,0.045,0.355,1);
    transition-delay: 0.5s;
}

.content-text .place h1 {
    font-size: 60px;
    letter-spacing: 80px;
    margin-right: -80px;
    /* background: salmon; */
    /* 沿着Y轴（垂直方向）移动元素 用于切换时的动画*/
    transform: translateY(100%);
}

.content-text .country h2 {
    font-size: 50px;
    letter-spacing: 30px;
    margin-right: -30px;
    transform: translateY(-110%);
    /* background: seagreen; */
}

.bg-slide.active .content-text .place h1,
.bg-slide.active .content-text .country h2{
    transform: translateY(0%);
    /*opacity 属性用于设置元素的透明度级别*/
    opacity: 1;
    
}
.bg-slide.after-active .content-text .place h1{
    transform: translateY(-110%);
    opacity: 1;
}
.bg-slide.after-active .content-text .country h2{
    transform: translateY(100%);
    opacity: 1;
}
.line {
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 500px;
    height: 2px;
    background: white;
    z-index: 100;
}

.rotate-btn {
    position: absolute;
    bottom: 60px;
    right: 60px;
    width: 60px;
    height: 60px;
    background: rgba(240, 128, 128, 0.164);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select:none;
}
.rotate-btn.active{
    transform: rotate(360deg);
    /* pointer-events属性用于指定某个元素是否可以成为鼠标事件的目标 */
    pointer-events: none;
    transition:transform .5s cubic-bezier(0.645,0.045,0.355,1);
    transition-delay: .2s;
}
.rotate-btn i {
    font-size: 40px;
    color: white;
}